<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .center{
      width: 1200px;
      margin: 0 auto;
    }
    body{
      background-color: rgb(241,242,243);
    }
    .el-header{
      background-color: white;
    }
    #footer_center p{
      margin: 0;
    }
    #footer_center h3{
      color: white;
    }
    p:hover {
      color:deepskyblue ;
    }
    .vodeolist img:hover {
      transform: scale(1.2);
    }
    .el-card a div{
      display:none;
    }
    .el-card a:hover div{
      display:block;
    }
    .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      background-image: url('img/plyingbutton.jpg');
      background-size: cover;
      opacity: 0;
    }
    a:hover .play-button {
      opacity: 1;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <!--头,引入my-header.js-->
    <my-header></my-header>
    <!--中间,主要内容部分-->
    <el-main class="center">
      <!--轮播图开始-->


      <!--付费课程-->
      <el-row style="background-color: white">
        <el-col span="3">
          <p style="font-size: 28px;line-height: 65px;margin: 0">{{title}}</p>
        </el-col>

      </el-row>
      <el-row gutter="25">
        <el-col v-for="r in courseArr" span="6">
          <el-card style="margin: 10px 0">
            <a class="vodeolist" style="color: #333;text-decoration: none; position: relative; display: inline-block;" :href="getLink(r.bvid)">
              <img :src="r.imgeurl" width="100%" height="144" style="cursor: pointer;">
              <div class="play-button"></div>
              <p style="height: 40px; cursor: pointer;overflow: hidden;
                                     display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical">{{r.coursename}}</p>
            </a>
            <div v-if="pricedisplay" style="display: inline-block;color: red;font-size: 20px">￥: {{r.price}}
            </div>
            <div v-if="pricedisplay" style="color: #cccccc;display: inline-block;margin-left: 50px"><i class="el-icon-user-solid">{{r.boughtnum}}人已购</i></div>
          </el-card>
        </el-col>
      </el-row>

      <!--付费课程结束-->
      <!-- 返回顶部按钮 -->
      <el-backtop :bottom="100">
        <div
                style="{
                                    height: 100%;
                                    width: 100%;
                                    background-color: #f2f5f6;
                                    box-shadow: 0 0 6px rgba(0,0,0, .12);
                                    text-align: center;
                                    line-height: 40px;
                                    color: #1989fa;
                                  }"
        >
          返回顶部
        </div>
      </el-backtop>
    </el-main>
    <!--脚-->
    <el-footer style="height: 350px;background-color: darkgrey;padding:50px 0">
      <my-footer></my-footer>
    </el-footer>

  </el-container>
</div>
</body>
<!--import axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入自己的js文件-->
<script src="js/my-header.js"></script>
<script src="js/my-footer.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        title:'免费课程',
        courseArr:[],
        link:'',
        pricedisplay:false
      }
    },
    methods: {
      getLink(bvid) {
        let link = this.title === '免费课程' ? "/video.html" : "/course.html";
        return link + "?bvid=" + bvid;
      }
    },
    created:function () {
      let paid = new URLSearchParams(location.search).get("paid");
      if(paid === '1'){
        this.title = '精品课程';
        this.pricedisplay = true;
      }
      axios.get("/v1/contents/courselist/"+paid)
              .then(function (response) {
                if (response.data.code == 1)
                  v.courseArr = response.data.data;
              });
    },
  })
</script>
</html>